<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>翻页</title>
	<style type="text/css">
	#box{
		width: 300px;
		height: 300px;
		margin:100px auto 10px;
		perspective:800px;
		perspective-origin:50% 0%;
	}
	#block{
		position: absolute;
		transform-style:preserve-3d;
	}
	#block > p{
		position: absolute;
		margin:auto;
		width: 300px;
		height: 300px;
		background-color: #000;
		font-size: 300px;
		line-height: 300px;
		font-weight: bold;
		color:#fff;
		text-align: center;
		transition: transform 2s linear;
		transform-origin: center top;
	}
	.page{
		position: relative;
		margin:20px auto;
		text-align:center;
	}
	.pR{
		transform:rotateX(270deg);
	}
	.pN{
		transition: transform 1s linear 2s;
		transform: rotateX(-90deg);
	}
	</style>
	<script type="text/javascript">
		var pageNum;
		var block;
		var tp;
		window.onload=function(){
			block=document.getElementById('block');
			tp=block.getElementsByTagName('p');
			pageNum=0;
		}	
		function nextPage(){
			if(pageNum<tp.length-1){
				tp[pageNum].setAttribute("class","pN");
				pageNum++;
				tp[pageNum].setAttribute("class","");
			}else{
				alert("已经是最后一页");
			}
		}
		function prePage(){
			if(pageNum>0){
				tp[pageNum].setAttribute("class","pR");
				pageNum--;
				tp[pageNum].setAttribute("class","");
			}else{
				alert("已经是第一页");
			}
		}
		
	</script>
</head>
<body>
	<div id="box">
		<div id="block">
			<p>1</p>
			<p class="pR">2</p>
			<p class="pR">3</p>
			<p class="pR">4</p>
			<p class="pR">5</p>
			<p class="pR">6</p>
			<p class="pR">7</p>
		</div>
	</div>
	<div class="page">
			<a href="javascript:;" onclick="nextPage()">下一页</a>
			<a href="javascript:;" onclick="prePage()">上一页</a>
	</div>
</body>
</html>